<template>
  <q-layout>
    <q-page-container>
      <q-page class="right">
        <div class="card">
          <div class="zuo">
            <div class="img">
              <div class="img2">
                <div class="left-title">
                <img src="../assets/git.svg" alt="" />
                <p>云端软件开发协作平台</p>
              </div>
              <div class="left-massage">
                <span class="left-name">熊平</span>
                <span class="left-job">51CTO创始人</span>
                <br />
                <div class="left-msg">
                  <span
                    >与其说喜欢 Gitee，其实更喜欢 Gitee
                    的团队。红薯是我见过的最幽默而执着的程序员，认真做产品，有耐心不功利，所以我相信
                    Gitee 一定会做的很好。</span
                  >
                </div>
                <!-- <a href="#"> -->
                <div class="left-foot">
                  <div>
                    <span class="left-final" style="display: inline-block">
                      Gitee 企业版
                    </span>
                    <span style="margin-left: 15px; display: inline-block"
                      >-</span
                    >
                    <span style="display: inlin-block; margin-left: 15px"
                      >企业级软件协作开发管理平台</span
                    >
                    <span
                      ><img src="../assets/arrow.png" alt="" class="arrow"
                    /></span>
                  </div>
                </div>
                <!-- </a> -->
              </div>
              </div>
              
            </div>
          </div>
          <div class="you">
            <div class="right-body">
              <h5 style="display:inline-block;font-weight:bolder;color:#40485B">登录</h5>
              <span class="regist">没有账号？<a href="#">点此注册</a></span>
              <q-input
                v-model="username"
                placeholder="手机/邮箱/个人空间地址"
                dense
                clearable
                outlined
                lazy-rules
        :rules="[ val => val && val.length > 0 || '用户名为必填项']"
                style="width:350px"
              />

              <q-input
                v-model="password"
                class="password"
                dense
                outlined
                placeholder="请输入密码"
                :type="isPwd ? 'password' : 'text'"
                style="width:350px"
              >
                <template v-slot:append>
                  <q-icon
                    :name="isPwd ? 'visibility_off' : 'visibility'"
                    class="cursor-pointer"
                    @click="isPwd = !isPwd"
                  />
                </template>
              </q-input>
             <q-checkbox v-model="right" color="orange" label="记住我" />
              <q-btn
                class="login"
                text-color="white"
                color="deep-orange"
                label="登录"
                style="width:350px;color:#F48B2C"
              />
            </div>
          </div>
        </div>

        <!-- 
            placeholder：输入框提示
            dense：输入框高度
            clearable：清楚输入框内容
            outlined：边框
            filled：背景加深
         -->
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<script setup>
export default {
  data() {
    return {
      username: "",
      password: "",
      isPwd: true,
      right:false
    };
  },
};
</script>

<style lang="scss" scoped>
a {
  list-style: none;
  text-decoration:none;
}
.right {
  padding: 80px;
}
.password {
  margin-top: 20px;
}
.login {
  width: 100%;
  margin-top: 30px;
}
.card {
  display: flex;
  box-shadow: 0px 20px 80px 0px rgb(0 0 0 / 30%);
  width: 1000px;
  height: 615px;
}
.zuo {
  width: 50%;
  color: #fff;
  background: linear-gradient(0deg, #3a485a 0%, #607089 100%);
}
.img {
  width: 100%;
  height: 100%;
  padding: 80px 80px 48px;
  background: url(../assets/back.png) no-repeat;
  // border: 1px solid blue;
}
.img2{
  // width: 100%;
  // height: 100%;
  // padding: 80px 80px 48px;
  // background: url(../assets/back-bottom.png) no-repeat right bottom;
  // border: 1px solid red;
}
.left-title {
  font-size: 1.714rem;
}
.left-title img {
  width: 50%;
}
.left-massage {
  // margin-top: 30px;
  position: relative;
  top: 30px;
}
.left-name {
  font-size: 14px;
  color: #a7afb6;
}
.left-job {
  font-size: 14px;
  color: #a7afb6;
  margin-left: 20px;
}
.left-msg {
  margin-top: 20px;
  height: 200px;
}
.left-final {
  font-weight: bold;
  font-size: 14px;
  box-sizing: inherit;
  margin-top: 30px;
  //   margin-left: 20px;
  //   padding-top: 40px;
}
.left-final::after {
  content: "hot";
  position: absolute;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 1px;
  margin-top: -12px;
  background-color: #c71d23;
  -webkit-transform: scale(0.84);
  transform: scale(0.84);
}
.left-foot {
  width: 100%;
  height: 90px;
  margin-left: 5%;
  margin-top: 40px;
  border-top: 1px solid #5d6979;
}
.left-foot div:hover {
  color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  //    background-color: #958abc;
}
.arrow {
  width: 14px;
  border: 1px solid #958abc;
  border-radius: 50%;
  background-color: white;
  position: relative;
  top: 1px;
}
.arrow:hover {
  background-color: #958abc;
}

// 右

.you {
  width: 50%;
//   background-color: blue;
}
.regist{
    // float: right;
    margin-left: 170px;
}
.right-body{
    // border: 1px solid red;
    width: 80%;
    margin-left: 10%;
    margin-top: 10%;
}


</style>